<template>
  <div ref="chartRef" :style="{ height, width }"></div>
</template>
<script lang="ts">
import { defineComponent, onMounted, PropType, ref, Ref, reactive, watchEffect } from 'vue';
import { useECharts } from '/@/hooks/web/useECharts';
import { cloneDeep } from 'lodash-es';
export default defineComponent({
  name: 'bar',
  props: {
    chartData: {
      type: Array,
      default: () => [],
    },
    option: {
      type: Object,
      default: () => ({}),
    },
    width: {
      type: String as PropType<string>,
      default: '100%',
    },
    height: {
      type: String as PropType<string>,
      default: '280px',
    },
    // update-begin--author:liaozhiyang---date:20240407---for：【QQYUN-8762】首页默认及echars颜色调整
    seriesColor: {
      type: String,
      default: '#1890ff',
    },
    // update-end--author:liaozhiyang---date:20240407---for：【QQYUN-8762】首页默认及echars颜色调整
  },
  setup(props) {
    const chartRef = ref<HTMLDivElement | null>(null);
    const { setOptions, resize } = useECharts(chartRef as Ref<HTMLDivElement>);
    onMounted(() => {
      window.addEventListener('resize', function () {
        resize()
      })
    })
    const dataY = ref(null)
    const dataX = ref(null)
    dataY.value = props.chartData.map((item) => {
      return item.value;
    });
    dataX.value = props.chartData.map((item) => {
      return item.name;
    });

    const bar = ref(null)
    bar.value = 'image://'


    const option = reactive({
      grid: {
        top: '10%',
        left: '12%',
        right: '22%',
        bottom: '10%',
      },
      xAxis: {
        show: false,
      },
      yAxis: [
        {
          name: '额定功率(千瓦)',
          nameTextStyle: {
            padding: [10, -20, -10, 0],
            lineHeight: 10,
          },
          data: dataX,
          splitLine: {
            show: false,
          },
          axisLabel: {
            textStyle: { fontSize: '80%', color: '#7d8590' },
          },
          axisLine: {
            show: false,
          },
          axisTick: false,
        },
        {
          data: dataY,
          splitLine: {
            show: false,
          },

          axisLine: {
            show: false,
          },

          axisTick: false,

        },
      ],
      series: [
        {
          type: 'pictorialBar',
          barWidth: 15,
          zlevel: 2,
          itemStyle: {
            normal: {
              color: '#000',
            },
          },
          data: dataY.value.map(function (item) {
            return {
              value: item,
              symbol: bar,
            };
          }),
        },
      ],
    });

    watchEffect(() => {
      props.chartData && initCharts();
    });

    function initCharts() {
      if (props.option) {
        Object.assign(option, cloneDeep(props.option));
      }

      dataY.value = props.chartData.map((item) => {
        return item.value;
      });
      dataX.value = props.chartData.map((item) => {
        return item.name;
      });

      setOptions(option);
    }
    return { chartRef };
  },
});
</script>
